<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue实例</title>
		<script src="../../vue/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- <div id="nh">
			<p v-for="item in movies">{{item}}</p>
		</div> -->
		<div id="app"><!-- 计数器功能 -->
			<h2> 当前计数：{{conter}}</h2>
			<!--  v-on:click="conter++"yu与@click="sub()"
					功能是一样的    @简写了 v-on 
			 -->
			<button type="button" v-on:click="conter++">+</button>
			<button type="button" v-on:click="conter--">-</button>
			<button type="button" @click="add()">+</button>
			<button type="button" @click="sub()">-</button>
		</div>
		
		<script type="text/javascript">
			/* var app = new Vue({
				el:"#nh",//用于挂载要管理的元素 
				data:{//定义数据
					message:"xieyingpeng",
					movies:['超越','大话西游','盗梦空间','泰坦尼克号']
				}
			}); */
			var app = new Vue({
				el:"#app",
				data:{
					conter:0 
				},
				methods:{
					
					add:function(){
						this.conter++;//当前对象
					},
					sub:function(){
						this.conter--;
					}
				}
			});
			/* 
			 前几天总结
			 1.vue读音
			 2.vue是一个渐进式框架
			 3.vue的特点
			 4.vue的安装
			 通过 cdn引入   下载引入    npm安装
			 5.vue列表的展示
			 v-for
			 6.计数器案例
			 事件监听   click  ->methods 
			 7.创建vue  options可以放那些东西
			 el:
			 data:
			 methods:
			 生命周期函数
			 8插值语法
			 mustache语法
			 v-once
			 v-html
			 v-text
			 v-pre
			 v-cloak
			 9.v-bind
			 v-bind绑定基本属性
			 v-bind:sr
			 v-bind:href
			 10.v-bind动态绑定 class
			 对象语法  class = '{类名：boolean}'
			 数组语法
			 11.v-bind动态绑定style
			 12.计算属性
			 
			 
			 */
		</script>
	</body>
</html>
